<template>
  <div>
    <el-dialog
      title="手动调整"
      v-model="props.manualSettingVisible"
      width="600px"
      @close="manualSettingFormCancel"
    >
      <el-form
        :model="manualSettingForm"
        :rules="manualSettingFormRules"
        ref="manualSettingFormRef"
        label-width="80px"
      >
        <el-form-item label="当前货币">
          {{ props.publicFrom.description }}({{ props.publicFrom.code }})
        </el-form-item>
        <el-form-item label="当前汇率">
          {{ props.publicFrom.rate }}
        </el-form-item>
        <el-form-item label="更新时间">
          {{ parseTime(props.publicFrom.updateTime, "{y}-{m}-{d}") }}
        </el-form-item>
        <el-form-item label="汇率值" prop="rate">
          <el-input-number
          style="width: 100%;"
            v-model="manualSettingForm.rate"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="调整原因" prop="reason">
          <el-input
            v-model.trim="manualSettingForm.reason"
            show-word-limit
            placeholder="请输入"
            maxlength="300"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="解锁时间" prop="UnlockTime" required>
          <el-date-picker
            :picker-options="expireTimeOPtion"
            style="width: 100%"
            v-model="manualSettingForm.UnlockTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button @click="manualSettingFormCancel">取 消</el-button>
        <el-button type="primary" @click="manualSettingFormSubmit"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script setup >
import { reactive, ref, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits([
  "manualSettingFormCancel",
  "manualSettingFormSubmit",
]);
const expireTimeOPtion = ref({
  disabledDate(time) {
    return time.getTime() < new Date().setHours(0, 0, 0, 0);
  },
});
const manualSettingForm = ref({
  rate: null,
  reason: null,
  UnlockTime: null,
  code: "",
});
// 表单校验
const manualSettingFormRules = reactive({
  rate: [{ required: true, message: "请输入汇率值", trigger: "change" }],
  reason: [{ required: true, message: "请输入调整原因", trigger: "blur" }],
  UnlockTime: [{ required: true, message: "请选择解锁时间", trigger: "blur" }],
});
const props = defineProps({
  manualSettingVisible: {
    type: Boolean,
    default: false,
  },
  publicFrom: {
    type: Object,
    default: {},
  },
});
watch(
  () => props.manualSettingVisible,
  () => {
    if (!props.manualSettingVisible) return;
    manualSettingForm.value.code = props.publicFrom.code;
    getManual(props.publicFrom); //获取手动调整的详情记录
  }
);
// 手动调整提交
const manualSettingFormSubmit = () => {
  proxy.$refs["manualSettingFormRef"].validate((valid) => {
    if (!valid) return;
    const params = {
      ...manualSettingForm.value,
      endTime: proxy.convertTime(1, manualSettingForm.value.UnlockTime),
    };
    rate.exchangerate
      .exchangerateAdjustrate({
        data: params,
      })
      .then((res) => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess("调整成功");
          proxy.resetForm("manualSettingFormRef");
          emits("manualSettingFormSubmit");
        }
      });
  });
};
// 获取手动调整的详情记录数据，并赋值
const getManual = (e) => {
  rate.exchangerate
    .exchangerateGetadjustrecord({
      data: {
        code: e.code,
      },
    })
    .then((res) => {
      if (res.code === 200 && res.data) {
        manualSettingForm.value.rate = res.data.rate;
        manualSettingForm.value.reason = res.data.reason;
        manualSettingForm.value.UnlockTime = proxy.DateTime(res.data.endTime);
      }
    });
};
const manualSettingFormCancel = () => {
  proxy.resetForm("manualSettingFormRef");
  emits("manualSettingFormCancel");
};
</script>